<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">	
<meta name="referrer" content="no-referrer">
<link rel="preconnect" href="https://qqwry.api.skk.moe">
<link rel="preconnect" href="https://myip.ipip.net">
<link rel="preconnect" href="https://api.ipify.org">
</head>
</html>	

<fieldset class="cbi-section">
	  <p width="100%" align="center" ><img src="" width="150" height="150" /></p>
	  <p width="100%" align="center"><font color="blue"><b id="_realtimelog">Clash for OpenWRT</b></font></p>
	  <p width="100%" align="center"><%:Rule-based Custom Proxy Client%></p>
	  
</fieldset>

<fieldset class="cbi-section">
	<table width="100%" cellspacing="10">
		<tr><td width="50%"><span><%:Clash Client%></span></td><td id="_clash"><em><%:Collecting data...%></em></td> </tr>
		<tr><td width="50%"><span><%:Clash Mode%></span></td><td id="_emode"><em><%:Collecting data...%></em></td> </tr>
		<tr><td width="50%"><span><%:Clash Config%></span></td><td id="_conf"><em><%:Collecting data...%></em></td> </tr>
		<tr><td width="50%"><span><%:Config Type%></span></td><td id="_conf_path"><em><%:Collecting data...%></em></td> </tr>
		<tr><td width="50%"><span><%:Clash Dashboard%></span></td><td id="_web"><em> <%:Collecting data...%> </em></td> </tr>
		<tr><td width="50%"><span><%:Yacd Dashboard%></span></td><td id="_webb"><em> <%:Collecting data...%> </em></td> </tr>
		
	</table>
</fieldset>

<fieldset class="cbi-section">
	<table width="100%" cellspacing="10">
		<tr><td width="50%"> <%:Dashboard Host%></td><td  id="_ip"><em><%:Collecting data...%></em></td></tr>
		<tr><td width="50%"> <%:Dashboard Port%></td><td  id="_port"><em><%:Collecting data...%></em></td></tr>
		<tr><td width="50%"> <%:Dashboard Secret%></td> <td  id="_secret"><em><%:Collecting data...%></em></td></tr>
	</table>
</fieldset>



<fieldset class="cbi-section">
	<table width="100%" cellspacing="10">
		<tr><td class="align-left" width="50%"><span><%:Global IP%> </span>&nbsp;:&nbsp;<span id="ip-ipify"><font color="red"><%:Checking...%></font></span> <span id="ip-ipify-ipip"></span></td> <td  width="15%">  <span><%:Google%></span>&nbsp;:&nbsp;<span id="_google"><em><%:Collecting data...%></em></span></td><td   width="15%"><span><%:Youtube%> </span>&nbsp;:&nbsp;<span id="_youtube"><em><%:Collecting data...%></em></span></td><td><span><%:Github%> </span>&nbsp;:&nbsp;<span id="_github"><em><%:Collecting data...%></em></span></td></tr>
		<tr><td class="align-left" width="50%"><span><%:Domestic IP%> </span>&nbsp;:&nbsp;<span id="d-ip"><font color="red"><%:Checking...%></font></span></td><td  width="15%"><span><%:Baidu%></span>&nbsp;:&nbsp;<span  id="_baidu"><em><%:Collecting data...%></em></span></td><td  width="15%"><span><%:Music.163%></span>&nbsp;:&nbsp;<span id="_http-163"><em><%:Collecting data...%></em></span></td><td><span><%:iQiyi%></span>&nbsp;:&nbsp;<span id="_iqiyi"><em><%:Collecting data...%></em></span></td></tr>
    </table>
</fieldset>

<script type="text/javascript">//<![CDATA[


let random = parseInt(Math.random() * 100000000);
let IP = {
            get: (url, type) =>
                fetch(url, { method: 'GET' }).then((resp) => {
                    if (type === 'text')
                        return Promise.all([resp.ok, resp.status, resp.text(), resp.headers]);
                    else {
                        return Promise.all([resp.ok, resp.status, resp.json(), resp.headers]);
                    }
                }).then(([ok, status, data, headers]) => {
                    if (ok) {
                        let json = {
                            ok,
                            status,
                            data,
                            headers
                        }
                        return json;
                    } else {
                        throw new Error(JSON.stringify(json.error));
                    }
                }).catch(error => {
                    throw error;
                }),
          parseIPIpip: (ip, elID) => {
                IP.get(`https://qqwry.api.skk.moe/${ip}`, 'json')
                    .then(resp => {
						 document.getElementById(elID).innerHTML = resp.data.geo;
                        //$$.getElementById(elID).innerHTML = `${resp.data.country} ${resp.data.regionName} ${resp.data.city} ${resp.data.isp}`;
                    })
            },

            getIpipnetIP: () => {
                IP.get(`http://myip.ipip.net/?z=${random}`, 'text')
                    .then((resp) => {
                        let data = resp.data.replace('当前 IP：', '').split(' 来自于：');
                        document.getElementById('d-ip').innerHTML = `${data[0]} ${data[1]}`;
                    });
            },
	   getIpifyIP: () => {
                IP.get(`https://api.ipify.org/?format=json&z=${random}`, 'json')
                .then(resp => {
                document.getElementById('ip-ipify').innerHTML = resp.data.ip;
                return resp.data.ip;
                })
                .then(ip => {
                IP.parseIPIpip(ip, 'ip-ipify-ipip');
                })
            }

	   /*getIpsbIP: (data) => {
                document.getElementById('ip-ipify').innerHTML = data.address;
		if ( "${data.province}" == " " || "${data.city}" == " " ){
                document.getElementById('ip-ipify-ipip').innerHTML = `${data.country} ${data.isp.name}`				
		}else{
		document.getElementById('ip-ipify-ipip').innerHTML = `${data.country} ${data.province} ${data.city} ${data.isp.name}`
		}
	   },*/
				
           
}

			
var HTTP = {
	checker: (domain, cbElID) => {
		let img = new Image;
		let timeout = setTimeout(() => {
			img.onerror = img.onload = null;
			img = null;
			document.getElementById(cbElID).innerHTML = '<b><font color="red"><%:NO ACCESS%></font></b>'
		}, 1000);
		img.onerror = () => {
			clearTimeout(timeout);
			document.getElementById(cbElID).innerHTML = '<b><font color="red"><%:TIMEOUT%></font></b>'
		}
		img.onload = () => {
			clearTimeout(timeout);
			document.getElementById(cbElID).innerHTML = '<b><font color="green"><%:NORMAL%></font></b>'
		}
		img.src = `https://${domain}/favicon.ico?${+(new Date)}`
	}

}

        function Load()
	    {
	         var tbip = document.getElementsByTagName('HEAD').item(0);
	         var tbipScript= document.createElement("script");
	         tbipScript.async = "async";
	         tbipScript.src='http://myip.ipip.net/?z=${random}';
	         tbip.appendChild( tbipScript);

	         var sbip = document.getElementsByTagName('HEAD').item(0);
	         var sbipScript= document.createElement("script");
	         sbipScript.async = "async";
	         sbipScript.src='https://qqwry.api.skk.moe/';
	         sbip.appendChild( sbipScript);



	         const $$ = document;
	         random = parseInt(Math.random() * 100000000);
       	     setTimeout("Load()",1000*8);
		}
		   
		   		   
		   
		   
	var web = document.getElementById('_web');
	var webb = document.getElementById('_webb');
	var clash = document.getElementById('_clash');
	var ip = document.getElementById('_ip');
	var port = document.getElementById('_port');
	var secret = document.getElementById('_secret');
	var emode = document.getElementById('_emode');
	var logo = document.getElementById('_logo');
	var conf = document.getElementById('_conf');
	var conf_path = document.getElementById('_conf_path');

	
	XHR.poll(1, '<%=luci.dispatcher.build_url("admin", "services", "clash", "status")%>', null, function(x, status) {
		if ( x && x.status == 200 ) {
			web.innerHTML = status.clash ? '<a type="button" class="btn" style="background-color:black;padding: 5px;"  href="http://'+window.location.hostname+':'+status.dash_port+'/ui" target="_blank"><b><font color="green"><%:DASHBOARD%></font></b></a>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			webb.innerHTML = status.clash ? '<a type="button" class="btn" style="background-color:black;padding: 5px;"  href="http://'+window.location.hostname+status.uhttp_port+'/luci-static/yacd?hostname='+ status.localip + '&port=' + status.dash_port + '&secret=' + status.dash_pass +'" target="_blank"><b><font color="green"><%:DASHBOARD%></font></b></a>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			clash.innerHTML = status.clash ? '<b><font color="green"><%:RUNNING%></font> </b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			ip.innerHTML = status.localip ? '<b><font color="green">'+status.localip+'</font> </b>' : '<em><b><font color="red"><%:NOT SET%></font></b></em>';
			port.innerHTML = status.dash_port ? '<b><font color="green">'+status.dash_port+'</font> </b>' : '<em><b><font color="red"><%:NOT SET%></font></b></em>';
			secret.innerHTML = status.dash_pass ? '<b><font color="green">'+status.dash_pass+'</font> </b>' : '<em><b><font color="red"><%:NOT SET%></font></b></em>';
			emode.innerHTML = status.clash ? '<b><font color="green" style="text-transform: uppercase;">'+status.e_mode+'</font> </b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			if(status.typeconf != 0 || status.typeconf != ''){
				conf.innerHTML = status.typeconf ? '<b><input type="button" class="btn" style="background-color:black;padding: 5px;font-color:green;color:green;font-weight:bold" value="<%:VIEW CONFIG%>" onclick="return view(this)" /></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}
			if(status.typeconf==1){
				conf_path.innerHTML = status.clash ? '<b><font color="green"><%:SUBSCRIBE%> </font></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}
			if(status.typeconf==2){
				conf_path.innerHTML = status.clash ? '<b><font color="green"><%:UPLOAD%></font></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}
			if(status.typeconf==3){
				conf_path.innerHTML = status.clash ? '<b><font color="green"><%:CUSTOM%></font></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}	
			if(status.typeconf==0 || status.typeconf==''){
				conf_path.innerHTML = status.typeconf ? '<b><font color="red"><%:NOT SELECTED%></font></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}		
			IP.getIpifyIP();
			IP.getIpipnetIP();


		}
	});


	XHR.poll(3, '<%=luci.dispatcher.build_url("admin", "services", "clash", "status")%>', null, function(x, status) {
		if ( x && x.status == 200 ) {			
			HTTP.checker('www.baidu.com', '_baidu');
			HTTP.checker('www.google.com', '_google');
			HTTP.checker('www.youtube.com', '_youtube');
			HTTP.checker('www.iqiyi.com', '_iqiyi');
			HTTP.checker('github.com', '_github');
			HTTP.checker('s1.music.126.net/style', '_http-163');

		}
	});

	IP.getIpifyIP();
	IP.getIpipnetIP();
	HTTP.checker('www.baidu.com', '_baidu');
	HTTP.checker('www.google.com', '_google');
	HTTP.checker('www.youtube.com', '_youtube');
	HTTP.checker('www.iqiyi.com', '_iqiyi');
	HTTP.checker('github.com', '_github');
	HTTP.checker('s1.music.126.net/style', '_http-163');


	var rtlog = document.getElementById('_realtimelog');
	XHR.poll(1, '<%=luci.dispatcher.build_url("admin", "services", "clash", "readlog")%>', status.readlog, function(x, status) {
	  if ( x && x.status == 200 ) {
		 if ( status.readlog != "\n" || status.readlog != "" ) {
			rtlog.innerHTML = '<b>'+status.readlog+'</b>';
		}
	  }
	});

//]]></script>

<style>
    .modals-bg{
        position: fixed;
        z-index: 90;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.8);
        display: none;
    }
    .modals {
        position: fixed;
        z-index: 100;
        width: 70%;
        height: 650px;
        background: #FFFFFF;
        left: 20%;
        top: 15%;
        color: #fff;
        border-radius: 10px;
        padding: 20px;

        box-sizing: border-box;
        -moz-box-sizing: border-box;
        /* Firefox */
        -webkit-box-sizing: border-box;
        /* Safari */
    }

    .modals h2 {}

    .modals h3 {
        font-size: 14px;
        color: red;
        background: transparent;
        margin: 0;
        padding: 0;
    }
    @media screen and (max-width: 1024px) {
        .modals {
            position: fixed;
            z-index: 100;
            width: 80%;
            height: 550px;
            background: #FFFFFF;
            left: 10%;
            top: 15%;
            color: #fff;
            border-radius: 10px;
            padding: 20px;
        }
    }
    @media screen and (max-width: 700px) {
        .modals-bg{
            position: fixed;
            z-index: 100000;

        }
        .modals {
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    }
	
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}	
</style>
<div class="modals-bg">
	
    <div class="modals">
	<span><input type="button" class="cbi-button cbi-button-apply" value="<%:Download%>" style=" display:inline;" onclick=" return download_conf()" /></span><br /><span class="close">&times;</span>
	<br /><h3 style="margin-left:0;"><%:If config does not show refresh page%></h3><br />
	 <span><textarea id="cbid.logview.1.conf" style="width:100%;height:80%; font-family:'Lucida Console'; font-size:12px;padding-left:3px;padding-right:22px;" readonly="readonly" wrap="off" rows="25"><%=pcdata(nixio.fs.readfile("/etc/clash/config.yaml"))%></textarea></span>
   </div>
</div>
<script>
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
var cfg = document.getElementsByClassName("modals-bg")[0];
span.onclick = function() {
  cfg.style.display = "none";
}
function view(btn) {
  cfg.style.display = "inline";
}

function createAndDownloadFile(fileName, content) {
    var aTag = document.createElement('a');
    var blob = new Blob([content]);
    aTag.download = fileName;
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}
function download_conf(){
	var lv = document.getElementById('cbid.logview.1.conf');
	var dt = new Date();
	createAndDownloadFile("config.yaml",lv.innerHTML)
	return
}
</script>

